<template>
  <!--列的宽度总和不能大于24-->
  <!--text-center样式让元素内的行内标签居中-->

  <el-col :span="4" class="border text-center">
    <router-link to="/space">
      <!--给图片一个连接到个人空间上-->
      <img src="@/assets/logo.png/" style="width: 3.5rem; height: 3.5rem" />
    </router-link>
  </el-col>

  <el-col :span="16" class="my-auto">
    <el-input class="w-75" placeholder="请输入笔记名关键字" v-model="searchVal">
      <template #append>
        <el-button type="info" plain @click="getNoteLi">
          <el-icon style="front-size: 1rem"><Search /></el-icon>
        </el-button>
      </template>
    </el-input>
  </el-col>

  <el-col :span="4">
    <!--登录后的模块-->
    <el-menu
      v-if="isLogin"
      class="h-100"
      :router="true"
      mode="horizontal"
      :ellipsis="false"
    >
    <!--主页记笔记按钮跳转到个人空间记笔记页面-->
      <el-menu-item index="/space/noteadd">
        <el-button>记笔记</el-button></el-menu-item
      >
      <!--主页面头像同步个人信息-->
      <el-menu-item index="/space">
        <el-avatar :size="50" :src="headUrl" class="headImg"
      /></el-menu-item>
    </el-menu>

    <el-menu
      v-else
      class="h-100"
      :router="true"
      mode="horizontal"
      :ellipsis="false"
    >
      <!--给登录按钮一个点击事件，由于js代码只有一行，可以直接写到标签上-->
      <el-menu-item index="/login"><el-button>登录</el-button></el-menu-item>
      <el-menu-item index="/registry"><el-button>注册</el-button></el-menu-item>
    </el-menu>
  </el-col>
</template>

<script>
import { Search } from "@element-plus/icons-vue";
import auth from "@/tools/auth.js";

export default {
  name: "HomeHeader",
  emits: ["getSearchVal"],
  components: {
    Search,
  },
  data() {
    return {
      searchVal: null, //搜索的值
      isLogin: false,
      headUrl: null,
    };
  },
  mounted() {
    this.isLogin = auth.isLogin();
    this.headUrl = auth.getLoginUser().headUrl;
  },
  methods: {
    //按下搜索按钮时，触发该函数
    getNoteLi() {
      //将searchVal值传给父组件
      //this.表示调用当前项目vue实例
      //$emit表示发起自定义事件的函数
      //发起一个名叫‘getSearchVal’的事件，接着把当前页面输入的搜索值，传给该事件
      this.$router.push("/list/"+this.searchVal);
    },
  },
};
</script>

<style>
</style>